// 实现这个项目的构建任务
const { src, dest, series, parallel, watch } = require('gulp')

const del = require('del')
const browserSync = require('browser-sync')

const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browserSync.create()

const data=require('./gulp.data')

const clean = ()=>{
    return del(['dist','temp'])
}

const style = ()=>{
    return src('src/assets/styles/*.scss',{ base:'src' })
    .pipe( plugins.sass({ outpuStyle:'expanded' }) )
    .pipe(dest('temp'))
    // .pipe(bs.reload( { stream: true })) 
}

const script = ()=>{
    return src('src/assets/scripts/*.js', { base:'src' })
    .pipe(plugins.babel({ presets:['@babel/preset-env'] }))
    .pipe(dest('temp'))
}

const page = ()=>{
    return src('src/*.html', { base:'src' })
    .pipe( plugins.swig({data}), {cache:false} ) //可能因为swig缓存，导致serve自动刷新失败，可设置cache为false
    .pipe(dest('temp'))
}

const image = () => {
    return src('src/assets/images/**', { base:'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', { base:'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
    return src('public/**', { base:'public' })
    .pipe(dest('dist'))
}

const lint = () => {
    return src(['src/**/*.js'])
    .pipe(plugins.eslint({
        rules: {
            'my-custom-rule': 1,
            'strict': 2
        },
        globals: [
            'jQuery',
            '$'
        ],
        envs: [
            'browser'
        ]
    }))
    .pipe(plugins.eslint.formatEach('compact', process.stderr));
}

const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    // watch('src/assets/images/**', image)
    // watch('src/assets/fonts/**', font)
    // watch('public/**', extra)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**',
    ], bs.reload)

    bs.init({
        notify:false,
        // port:2020,
        // open:false,
        files:'dist/**', //监听dist下文件变化，自动更新
        server:{
            baseDir:['temp', 'src', 'public'],  // 图片、字体可以直接使用src、public目录下
            routes:{
                '/node_modules':'node_modules'
            }, // 优先于baseDir,开发环境用
        }
    })
}

const useref = () => {
    return src('temp/*.html', { base:'temp' })
    .pipe(plugins.useref({ searchPath:['temp','.'] }))  // 数组参数，使用少的放前面
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
        collapseWhitespace:true,
        minifyCSS:true,
        minifyJS:true
    })))
    .pipe(dest('dist'))
}

const compile = parallel(style, script, page)   // compile: 开发阶段必须做的事情

const build = series(
    clean, 
    parallel(
        series(compile, useref), 
        image, 
        font, 
        extra
    )
) 

const develop = series(compile, serve)

const start = series(build, serve)

module.exports={
    clean,
    lint,
    build,
    develop,
}